<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/7/4
  Time: 16:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@page isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html>
<head>
    <title>景点展示</title>
</head>
<script src="js/jquery-3.1.1.js"></script>
<style type="text/css">
    .ssk {
        width: 700px;
        margin: 20px auto;
    }

    .aside_left {
        width: 90%;
        height: 34px;
    }

    .ss {
        height: 35px;
        width: 60px;
    }

    .aside_left2 {
        width: 150px;
        height: 50px;
        background: #ffacf8;
        color: white;
        font-size: 25px;
    }

    .zhuti {
        width: 60%;
        margin: 0 auto;
    }

    .fd {
        float: left;
        margin-left: 20px;
    }

    .clearfix:after {
        content: "";
        display: block;
        height: 0px;
        clear: both;
        visibility: hidden;
    }

    .tupian {
        float: left;
    }

    li {
        list-style-type: none
    }
</style>
<body>
<%--<%
    Object sceneryList = session.getAttribute("sceneryList");
    if(sceneryList==null){
        response.sendRedirect("ToMainServlet");
    }
%>--%>
<%@include file="pageTitle.jsp" %>
<%--图片--%>
<div style="width: 100%;height: 500px;">
    <a href="SceneryNewServlet?sceid=${scenery.sceId}"><img src="./img/img1.jpg" style="width: 100%;height: 500px;"></a>
</div>
<div style="width: 60%;margin: 0 auto;">
    <h3>景点筛选</h3>
    <hr>
</div>

<!-- 选择区 -->
<div class="zhuti">
    <div class="context">
        <ul class="clearfix">
            <li class="fd">地区：</li>
            &nbsp&nbsp&nbsp&nbsp
            <li class="fd"><a href="" onclick="userChoice(this)">不限</a></li>
            <li class="fd"><a href="javascript:" onclick="userChoice('华南')">华南</a></li>
        </ul>
        <br>
        <ul class="clearfix">
            <li class="fd">主题：</li>
            &nbsp&nbsp&nbsp&nbsp
            <li class="fd"><a href="">不限</a></li>
            <li class="fd"><a href="">温泉</a></li>
            <li class="fd"><a href="">公园</a></li>
            <li class="fd"><a href="">山川</a></li>
        </ul>
        <br>
        <ul class="clearfix">
            <li class="fd">星级：</li>
            &nbsp&nbsp&nbsp&nbsp
            <li class="fd"><a href="">不限</a></li>
            <li class="fd"><a href="">5A</a></li>
            <li class="fd"><a href="">4A</a></li>
            <li class="fd"><a href="">其他</a></li>
        </ul>
    </div>
    <!-- 旅游景点展示区 -->
    <c:forEach var="scenery" items="${sceneryList}">
    <div class="sceShow clearfix" style="margin-top: 30px;">
        <div class="tpzb">
            <div class="tupian"><a href="SceneryNewServlet?sceid=${scenery.sceId}" class="aImg"><img
                    src="${scenery.pic}" style="width: 200px; height: 200px;" class="sceImg"></a></div>
            <div class="tupian" style="width: 60%;height: 200px; margin-left: 30px;margin-top: 30px;">
                <a href="SceneryNewServlet?sceid=${scenery.sceId}" class="aImg"><h2 class="sceh">${scenery.sceName}</h2>
                </a><br>
                <div style="margin-top: 30px;">
                    <span class="sceLoc">地址：${scenery.location}</span><br>
                    <span class="sceSpecial">特色：${scenery.context}</span>
                </div>
            </div>
            <div class="tupian" style="margin-top: 40px;">
                <span style="color: red;">￥</span><span style="color: red;font-size:50px;"
                                                        class="ticket">${scenery.ticket}</span><span>起</span><br>
                <a href="SceneryNewServlet?sceid=${scenery.sceId}" class="aImg"><input class="aside_left2" type="button"
                                                                                       name="" value="查看详情"></a>
            </div>
        </div>
    </div>
    </c:forEach>
    <h4>
        <a href="ToMainServlet?pageIndex=1">首页</a>
        <a href="ToMainServlet?pageIndex=${pageIndex-1}">上一页</a>
        <a href="ToMainServlet?pageIndex=${pageIndex+1}">下一页</a>
        <a href="ToMainServlet?pageIndex=${totalPages}">尾页</a>
    </h4>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>

    <script type="text/javascript">

        var sceShow = document.getElementsByClassName("sceShow");
        var aImg = document.getElementsByClassName("aImg");
        var sceImg = document.getElementsByClassName("sceImg");
        var sceh = document.getElementsByClassName("sceh");
        var sceLoc = document.getElementsByClassName("sceLoc");
        var sceSpecial = document.getElementsByClassName("sceSpecial");
        var ticket = document.getElementsByClassName("ticket");

        function userChoice(obj) {
            var keyword = obj;
            $.ajax({
                url: "getSceneryByKeyWordServlet",
                data: {"keyword": keyword},
                type: "post",
                success: function (result) {
                    console.log(result);
                    var resultJson = JSON.parse(result);
                       console.log(resultJson);
                    if (resultJson.errCode == 200) {
                        for (var i = 0; i < sceShow.length; i++) {
                            sceShow[i].style.display = "none";
                        }
                        var sceJson = resultJson.data;
                        for (var i = 0; i < sceJson.length; i++) {
                            sceShow[i].style.display = "block";
                            var scenery = sceJson[i];

                            aImg[i * 3].href = "SceneryNewServlet?sceid=" + scenery.sceId;
                            aImg[i * 3 + 1].href = "SceneryNewServlet?sceid=" + scenery.sceId;
                            aImg[i * 3 + 2].href = "SceneryNewServlet?sceid=" + scenery.sceId;


                            sceImg[i].src = scenery.pic;
                            sceh[i].innerHTML = scenery.sceName;
                            sceLoc[i].innerHTML = "地址：" + scenery.area.areaName;
                            ticket[i].innerHTML = scenery.ticket;


                        }
                    }
                }
            })
        }
    </script>
</body>
</html>
